import 'package:flutter/material.dart';
import 'package:flutter_components_web/cons/constant.dart';
import 'package:flutter_components_web/utils/responsive.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

import '../shared/com_button.dart';

class ComCard extends StatefulWidget {
  const ComCard({super.key});

  @override
  State<ComCard> createState() => _ComCardState();
}

class _ComCardState extends State<ComCard> with Constants {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GridView.builder(
        padding: EdgeInsets.all(5.r),
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: crossAxisCount,
          mainAxisSpacing: 5.r,
          crossAxisSpacing: 5.r,
          childAspectRatio: 0.618,
        ),
        itemBuilder: (ctx, index) {
          return _buildGridItem();
        },
        itemCount: 50,
      ),
    );
  }

  int get crossAxisCount =>
      context.responsive(1, ssm: 2, sm: 3, md: 4, lg: 5, xl: 6);

  _buildCover() {
    return ClipRRect(
      clipBehavior: Clip.hardEdge,
      borderRadius: BorderRadius.all(Radius.circular(20)),
      child: AspectRatio(
        aspectRatio: 1,
        child: Image.asset(
          "assets/images/sample.jpeg",
          width: MediaQuery.of(context).size.width / crossAxisCount,
          height: MediaQuery.of(context).size.width / crossAxisCount,
          fit: BoxFit.cover,
        ),
      ),
    );
  }

  _buildTitles() {
    return Container(
      padding: EdgeInsets.only(top: 15.r, left: 10.r, right: 10.r, bottom: 5.r),
      alignment: Alignment.centerLeft,
      child: RichText(
        text: TextSpan(
          children: [
            TextSpan(
              text: "Sophie Bennett",
              style: TextStyle(
                fontSize: 15,
                color: Colors.black,
                fontWeight: FontWeight.bold,
              ),
            ),
            WidgetSpan(
              alignment: PlaceholderAlignment.middle,
              child: Container(
                margin: EdgeInsets.only(left: 8.r),
                child: Image.asset(
                  "assets/images/award_icon.png",
                  width: 15.r,
                  height: 15.r,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  _buildDesc() {
    return Container(
      padding: EdgeInsets.only(left: 10.r, right: 10.r),
      alignment: Alignment.centerLeft,
      child: Text(
        "Product Designer who focuses on simplicity & usability.",
        maxLines: 2,
        style: TextStyle(
          fontSize: 12,
          color: Colors.black45,
          overflow: TextOverflow.ellipsis,
        ),
      ),
    );
  }

  _buildOperations() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        _buildRichText("assets/images/person_icon.png", "312"),
        _buildRichText("assets/images/love_icon.png", "48"),
        ComButton(
          text: 'Follow +',
          textColor: Colors.black,
          bgColor: Color.fromRGBO(239, 239, 239, 1),
          enableBorder: true,
        ),
      ],
    );
  }

  _buildRichText(String icon, String label) {
    return RichText(
      text: TextSpan(
        children: [
          WidgetSpan(
            child: Image.asset(
              icon,
              width: 15.r,
              height: 15.r,
              color: Colors.black45,
            ),
          ),
          TextSpan(
            text: " $label",
            style: TextStyle(fontSize: 10.r, color: Colors.black),
          ),
        ],
      ),
    );
  }

  Widget _buildGridItem() {
    return Container(
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(20),
        boxShadow: [
          BoxShadow(color: Colors.black12, blurRadius: 15, spreadRadius: 1),
        ],
      ),
      padding: EdgeInsets.all(5),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          _buildCover(),
          _buildTitles(),
          _buildDesc(),
          _buildOperations(),
        ],
      ),
    );
  }
}
